import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const EmergencyPlanMeta: IPublicTypeComponentMetadata = {
  componentName: 'EmergencyPlan',
  title: '应急预案',
  category: '信息展示',
  group: '应急管理',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'EmergencyPlan',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'number',
      description: '组件宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '组件高度'
    },
    {
      name: 'title',
      propType: 'string',
      description: '预案标题'
    },
    {
      name: 'iconImage',
      propType: 'string',
      description: '图标图片'
    },
    {
      name: 'backgroundImage',
      propType: 'string',
      description: '背景图片'
    },
    {
      name: 'backgroundColor',
      propType: 'string',
      description: '背景颜色'
    },
    {
      name: 'borderColor',
      propType: 'string',
      description: '边框颜色'
    },
    {
      name: 'titleColor',
      propType: 'string',
      description: '标题颜色'
    },
    {
      name: 'titleFontSize',
      propType: 'number',
      description: '标题字体大小'
    },
    {
      name: 'titleFontWeight',
      propType: 'string',
      description: '标题字体粗细'
    },
    {
      name: 'titleLetterSpacing',
      propType: 'string',
      description: '标题字间距'
    },
    {
      name: 'titleAlign',
      propType: 'string',
      description: '标题对齐方式'
    },
    {
      name: 'showIcon',
      propType: 'bool',
      description: '显示图标'
    },
    {
      name: 'theme',
      propType: 'string',
      description: '主题'
    },
    {
      name: 'onClick',
      propType: 'func',
      description: '点击事件'
    },
    {
      name: 'onIconClick',
      propType: 'func',
      description: '图标点击事件'
    }
  ],
  configure: {
    props: [
      // 预案项目配置
      {
        name: 'planItems',
        title: { label: { type: 'i18n', 'en-US': 'planItems', 'zh-CN': '预案列表' } },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'id',
                      title: 'ID',
                      setter: 'StringSetter',
                      initialValue: '1'
                    },
                    {
                      name: 'title',
                      title: '预案标题',
                      setter: 'StringSetter',
                      initialValue: '应急预案'
                    },
                    {
                      name: 'iconImage',
                      title: '图标图片',
                      setter: 'StringSetter',
                      initialValue: 'http://localhost:8085/static/images/yingjiguanli/yuan.png'
                    },
                    {
                      name: 'backgroundImage',
                      title: '背景图片',
                      setter: 'StringSetter',
                      initialValue: 'http://localhost:8085/static/images/yingjiguanli/jx.png'
                    }
                  ]
                }
              }
            },
            newItemDefault: {
              id: '1',
              title: '应急预案',
              iconImage: 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
              backgroundImage: 'http://localhost:8085/static/images/yingjiguanli/jx.png'
            },
            sortable: true
          }
        }
      },
      // 布局配置
      {
        name: 'width',
        title: { label: { type: 'i18n', 'en-US': 'width', 'zh-CN': '组件宽度' } },
        setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 460 }
      },
      {
        name: 'itemSpacing',
        title: { label: { type: 'i18n', 'en-US': 'itemSpacing', 'zh-CN': '项目间距' } },
        setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 8 }
      },

      {
        name: 'showIcon',
        title: { label: { type: 'i18n', 'en-US': 'showIcon', 'zh-CN': '显示图标' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick', 'onIconClick']
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '应急预案',
    screenshot: '',
    schema: {
      componentName: 'EmergencyPlan',
      props: {
        width: 500,
        itemSpacing: 8,
        planItems: [
          {
            id: '1',
            title: '大客流-出发层',
            iconImage: 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
            backgroundImage: 'http://localhost:8085/static/images/yingjiguanli/jx.png'
          },
          {
            id: '2',
            title: '大客流-到达层',
            iconImage: 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
            backgroundImage: 'http://localhost:8085/static/images/yingjiguanli/应急预案背景2.png'
          },
          {
            id: '3',
            title: '火灾-出租车蓄车场',
            iconImage: 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
            backgroundImage: 'http://localhost:8085/static/images/yingjiguanli/应急预案背景2.png'
          },
          {
            id: '4',
            title: '火灾-出租车蓄车场',
            iconImage: 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
            backgroundImage: 'http://localhost:8085/static/images/yingjiguanli/应急预案背景2.png'
          },
          {
            id: '5',
            title: '火灾-出租车蓄车场',
            iconImage: 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
            backgroundImage: 'http://localhost:8085/static/images/yingjiguanli/应急预案背景2.png'
          },
          {
            id: '6',
            title: '火灾-出租车蓄车场',
            iconImage: 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
            backgroundImage: 'http://localhost:8085/static/images/yingjiguanli/应急预案背景2.png'
          }
        ],
        backgroundColor: 'linear-gradient(135deg, #1073C8 0%, rgba(9, 71, 122, 0.7) 100%)',
        borderColor: '#00BFFF',
        titleColor: '#FFFFFF',
        titleFontSize: 16,
        titleFontWeight: 500,
        titleLetterSpacing: '1px',
        titleAlign: 'left',
        iconSize: {
          width: 31,
          height: 32
        },
        showIcon: true
      }
    }
  }
];

export default {
  ...EmergencyPlanMeta,
  snippets
};
